<template>
<!-- 博客渲染界面，从父组件获取到参数，渲染出来 -->
  <div>
    <div class="mybody" >
        <!-- 渲染 -->
            <blog-list v-for="(item,index) in blogData" :key="index" >
                <li> 
                    <img :src="getimg(item.headImg)" alt="">
                </li>

                <li>
                    <span>{{item.title}}</span>
                    <p>作者：{{item.loginname}}</p>
                    <div class="content" v-html="GetChinese(item.content)">
                        <!-- {{htmlDecodeByRegExp(item.content)}} -->
                        内容是：
                    </div>
                    <div>{{timeConvert(item.createtime,1)}}</div>
                </li>
                <li>
 
                        <router-link :to="{path:'/blog/blogLook',query:{id:item.id}}"  tag="el-button" type="primary" >
                        查看
                        </router-link>                 

                </li>
                
            </blog-list>

    </div>
    <!-- 分页设置 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-count="pageCount"
      :page-size="5"
      layout="prev, pager, next, jumper"
      :total="total"
      class="page"
      >
        
    </el-pagination>
  </div>

</template>

<script> 
import blogList from "./blogList"
export default {
    data () {
      return {
        pageCount:5,//总页数
        currentPage:1,//当前页数
        total:10,//总条数
        pageSize:5,//每页显示条目个数
        blogData:[],
        blogUrl:this.pathUrl.blogUrl,
        getTotalUrl:this.pathUrl.getTotalUrl,
        pageCount:(this.total%this.pageSize==0 ? this.total/this.pageSize : this.total/this.pageSize+1),//当前总页数
        // blogUrl:"http://localhost:3003/api/blog/list",
        // getTotalUrl:"http://localhost:3003/api/blog/total",
      }
    },
    //获取父组件传来的值
    props: ['mothed'],//方法,利用这个进行父子传值
    
    methods: {
        /**
         * 取出汉字
         * 
         */
        GetChinese(strValue) {  
            if(strValue!= null && strValue!= ""){  
                var reg = /[\u4e00-\u9fa5]/g;   
                return strValue.match(reg).join("");  
            }  
            else  
                return "";  
        } ,
        // 获取数据
        // blogData(){
        //     console.log(this.blogData)
        // },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage=val;
            console.log(`当前页: ${this.currentPage}`);
            this.getpageCon()
        },
        /**
         * 内容转码
         */
        htmlDecodeByRegExp (str){  
        var temp = "";
        if(str.length == 0) return "";
            temp = str.replace(/&amp;/g,"&");
            temp = temp.replace(/&lt;/g,"<");
            temp = temp.replace(/&gt;/g,">");
            temp = temp.replace(/&nbsp;/g," ");
            temp = temp.replace(/&#39;/g,"\'");
            temp = temp.replace(/&quot;/g,"\"");
            console.log(temp)
            return temp;  
        },
        /**
        * 获取到图片
        */
        getimg(img){
            return this.pathUrl.getImg+img
        },

        // 获取分页内容
        getpageCon(){   
            // console.log(this.mothed)
            // if(mothod=="all"){

            // }    
            // console.log(this.mothed+"333")     

            this.$axios.post(this.blogUrl,
            {
                begin:this.currentPage*this.pageSize-5,//第几条开始,0,
                end:this.currentPage*this.pageSize,//第几条结,4,
                mothed:this.mothed,
            })
            .then((result) => {
                this.blogData=result.data
                // console.log(this.blogData)
            })
            .catch((err) => {
                console.log("查找内容失败")
            });
    
        },
        //获取总条数
        getgetTotal(){
            this.$axios.post(this.getTotalUrl,
            {
                mothed:this.mothed,
            })
            .then((result) => {
                this.total=result.data[0].counts
                console.log(this.total)
            })
            .catch((err) => {
                console.log("总条数失败")
            });
        },

        // 时间戳格式化
        timeConvert(timestamp,num){//num:0 YYYY-MM-DD  num:1  YYYY-MM-DD hh:mm:ss // timestamp:时间戳 
            timestamp = timestamp+'';
            timestamp = timestamp.length==10?timestamp*1000:timestamp;
            var date = new Date(timestamp);
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? ('0' + m) : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;  
            second = second < 10 ? ('0' + second) : second; 
            if(num==0){
                return y + '-' + m + '-' + d;  
            }else{
                return y + '-' + m + '-' + d +' '+ h +':'+ minute +':' + second;  
            }
        },

    },
    // 加载
    mounted:function(){
        console.log(this.mothed)
        if(this.mothed=="all"){
        this.getpageCon()
        this.getgetTotal()
        }


    },
    // 检测mothed变化
    watch: {
            //正确给 mothed 赋值的 方法
        mothed: function(newVal,oldVal){
            // console.log(newVal,oldVal)
            console.log("检查mothed值"+this.mothed+"变了")
            this.mothed = newVal;  //newVal即是chartData
            newVal && this.getpageCon(); //newVal存在的话执行this.getpageCon()函数
            newVal && this.getgetTotal()
        },
        currentPage:function(newVal){
            newVal && this.getpageCon(); //newVal存在的话执行this.getpageCon()函数
            newVal && this.getgetTotal()
        },
        $router:function(newVal){
            console.log(newVal)
             if(this.currentPage==1 && $route.path=='/blog/index'){
                this.getpageCon()
                this.getgetTotal()
            }
        }
    },


    // 模板
    components: {
      blogList
    },
}
</script>

<style scoped>
.mybody{
  padding: 0 10%;
}
blog-list:nth-child(even){
  background: red;
}
.content{
    font-size: 15px;
    color: #888;
}
.page{
    text-align: center;
}
</style>